<template>
  <FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import FilmListTopNav from "../components/FilmListTopNav.vue";
let fixed = ref<boolean>(false);

onMounted(() => {
  window.addEventListener("scroll", () => {
    let top = document.documentElement.scrollTop;
    if (top > 100) {
      fixed.value = true;
    } else {
      fixed.value = false;
    }
  });
});
</script>

<style scoped lang="scss">
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fafafa;
}
</style>
